/* CSS Document */
/* 
* Inspired by http://strml.net/
* 大家好，我是刘金发
* 最近发现了一些有趣的东西，
* 想要做一份特别的简历 
*/

/* 首先给所有元素加上过渡效果 */
* {
	transition: all .3s;
}
/* 白色背景太单调了，我们来点背景 */
html {
	color: rgb(222,222,222);
	background: rgb(0,43,54);
}
/* 文字离边框太近了 */
.styleEditor {
	padding: .5em;
	border: 1px solid;
	margin: .5em;
	overflow: auto;
	width: 45vw;
	height: 90vh;
}
/* 代码高亮 */
.token.selector {
	color: rgb(133,153,0);
}
.token.property {
	color: rgb(187,137,0);
}
.token.punctuation {
	color: yellow;
}
.token.function {
	color: rgb(42,161,152);
}
/* 加点 3D 效果呗 */
html {
	perspective: 1000px;
}
.styleEditor {
	position: fixed;
	left: 0;
	top: 0;
	-webkit-transition: none;
	transition: none;
	-webkit-transform: 
		rotateY(10deg) translateZ(-100px);
	transform: 
		rotateY(10deg) translateZ(-100px);
}
/* 接下来我给自己准备另一个编辑器 */
.resumeEditor {
	position: fixed;
	right: 0;
	top: 0;
	padding: .5em;
	margin: .5em;
	width: 48vw;
	/*	min-width: 18vw;*/
/*	height: 90vh;*/
	min-height: 10vh;
	border: 1px solid;
	background: white;
	color: #222;
	overflow: auto;
}
/* 好了，我开始写简历了 */


/**/
/* 这个简历好像差点什么
 * 对了，这是 文本 格式的，
 * 我需要变成对 HR 更友好的格式
 * 简单，给它加些标签替换成 HTML 就行了
 */


/**/
/* 再对 HTML 加点样式 */
/*感觉编辑器高度太低了，加高点吧*/
/*对编辑框进行调整*/
.resumeEditor {
	height: 90vh;
	padding: 1em;
}
/*给标题增加样式*/
.resumeEditor h2 {
	display: inline;
	border-bottom: 1px solid;
/*		margin: 1em 0 .5em;*/
}
/*把详情中的默认样式设为空*/
.resumeEditor ul, .resumeEditor ol {
	list-style: none;
}
/*在部分详情的最前面添加自定义样式*/
.resumeEditor ul>li:before {
	content: '•';
	margin-right: .5em;
}
/*给剩下部分的详情添加自定义样式*/
.resumeEditor ol {
	counter-reset: section;
}
.resumeEditor ol li:before {
	counter-increment: section;
	content: counters(section, ".");
	margin-right: .5em;
}
.resumeEditor blockquote:before {
	content: '> '
}
/*把最后那句引用加个好看点的背景吧*/
.resumeEditor blockquote {
	margin: 1em;
	padding: .5em;
	background: #ddd;
}
/*最后，对整体进行最后的优化*/
html {
	min-height: 100vh;
}
* {
	box-sizing: border-box;
}
